<template>
  <div :class="[
      item.width!==''?width:'col-lg1-100',
      item.height!==''?height:'fill-h',
      rowSpacing,
      colSpacing
      ]"
       v-show="show"
  >
    <div v-if="item.type==='wrapper'" class="fill-h">
      <div :class="[border!==false?borderType.box:'fill-h']">
        <div :class="[border!==false?borderType.xpanel:'fill-h']">
          <div v-if="title!==''" class="xtitle">
            <span>{{ title }}</span>
          </div>
          <div class="fill-h" :class="title!==''?'xmain':''">
            <div class="fill-h" :class="item.scrolling?scrollingClass:''">
              <wrapperItem v-for="subWrapperItem in item.wrapper" :item="subWrapperItem"></wrapperItem>
            </div>
          </div>
        </div>
      </div>
      <div v-if="isToolBox===true">
        <div class="map-btns">
          <a v-for="mapBtn in item.toolBox.item" class="map-btn" :type="mapBtn.type"
             :title="mapBtn.title"><span></span></a>
        </div>
      </div>
    </div>
    <div v-else class="fill-h">
      <div class="fill-h" :class="[
          item.scrolling?scrollingClass:'',
          title!==''?'xmain':''
          ]">
        <xMoni v-if="item.type==='xMoni'" :item="item"></xMoni>
        <xMoniTitle v-if="item.type==='xMoniTitle'" :item="item"></xMoniTitle>
        <xMoniInterval v-if="item.type==='xMoniInterval'" :item="item"></xMoniInterval>
        <xLabelWrapper v-if="item.type==='xlabel-wrapper'" :item="item"></xLabelWrapper>
        <xLabelPart v-if="item.type==='xlabel-part'" :item="item"></xLabelPart>
        <xTable v-if="item.type==='xtable'" :item="item"></xTable>
        <xChartWrapper v-if="item.type==='xchart-wrapper'" :item="item"></xChartWrapper>
        <mapComp v-if="item.type==='map'" :topAndBottom="{top: false, bottom: false}"></mapComp>
      </div>
      <div v-if="isToolBox===true">
        <div class="map-btns">
          <a v-for="mapBtn in item.toolBox.item" class="map-btn" :type="mapBtn.type"
             :title="mapBtn.title"><span></span></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import xMoni from "@/components/bigScreen/xWrapper/xMoni";
import xMoniTitle from "@/components/bigScreen/xWrapper/xMoniTitle";
import xMoniInterval from "@/components/bigScreen/xWrapper/xMoniInterval";
import xLabelWrapper from "@/components/bigScreen/xWrapper/xLabelWrapper";
import xLabelPart from "@/components/bigScreen/xWrapper/xLabelPart";
import xTable from "@/components/bigScreen/xWrapper/xTable";
import xChartWrapper from "@/components/bigScreen/xWrapper/xChartWrapper";
import mapComp from '@/components/Map/mapComp'

export default {
  name: "wrapperItem",
  components: {xMoni, xMoniTitle, xMoniInterval, xLabelWrapper, xLabelPart, xTable, xChartWrapper, mapComp},
  props: {
    item: {
      type: Object,
      default: () => {
      }
    },
  },
  computed: {
    autoFixWidth() {
      return this.item.autoFixWidth ? "" : "1";
    },
    width() {
      return this.item.width ? "col-lg" + this.autoFixWidth + "-" + this.item.width.replace(/%*/g, "") : "";
    },
    height() {
      return this.item.height ? "xpanel-wrapper-" + this.item.height.replace(/%*/g, "") : "";
    },
    rowSpacing() {
      let result = "";
      if (this.item.spacing) {
        result = this.item.spacing.row ? "row-spacing-5" : "";
      }
      return result;
    },
    colSpacing() {
      let result = "";
      if (this.item.spacing) {
        result = this.item.spacing.col ? "col-spacing-5" : "";
      }
      return result;
    },
    title() {
      let result = this.item.title ? this.item.title : "";
      return result;
    },
    scrollingClass() {
      let result = "";
      if (this.item.scrolling) {
        if (this.item.scrolling.x && this.item.scrolling.y) {
          result = "fill-scrolling";
        } else if (this.item.scrolling.x && !this.item.scrolling.y) {
          result = "fill-scrolling-x";
        } else if (!this.item.scrolling.x && this.item.scrolling.y) {
          result = "fill-scrolling-y";
        }
      }
      return result;
    },
    border() {
      return this.item.border ? this.item.border.show : false;
    },
    borderType() {
      let result = {
        xpanel: "",
        box: ""
      };
      if (this.item.border) {
        switch (this.item.border.borderType) {
          case "":
            result.xpanel = "fill-h";
            result.box = "fill-h";
            break;
          case "border1":
            result.xpanel = "xpanel-label";
            result.box = "fill-h";
            break;
          case "border2":
            result.xpanel = "xpanel";
            result.box = "xpanel-box";
            break;
          case "border3":
            result.xpanel = "xpanel3";
            result.box = "xpanel-box3";
            break;
        }
      }
      return result;
    },
    isToolBox() {
      if (this.item.toolBox) {
        if (this.item.toolBox.item.length > 0)
          return true;
        else return false;
      } else return false;
    },
    show(){
      return this.item.hidden?!this.item.hidden:true;
    }
  }
}
</script>

<style lang="css" scoped src="@/components/bigScreen/css/common.css"></style>
<style lang="css" scoped src="@/components/bigScreen/css/screen.main.css"></style>
<style lang="scss" scoped>
</style>
